<template>
  <s-layout title="修改密码" class="set-wrap">
    <view class="pwd-retrieve-container">
      <uni-forms ref="accountLoginRef" :model="state.model" :rules="state.rules" labelWidth="80px" labelPosition="left"
        border class="form-box">
        <uni-forms-item name="oldPassword" label="旧密码">
          <uni-easyinput v-model="state.model.oldPassword" type="password" placeholder="请输入旧密码" :inputBorder="false" />
        </uni-forms-item>
        <uni-forms-item name="newPassword" label="新密码">
          <uni-easyinput v-model="state.model.newPassword" type="password" placeholder="请输入新密码" :inputBorder="false" />
        </uni-forms-item>
        <uni-forms-item name="confirmPassword" label="确认密码">
          <uni-easyinput v-model="state.model.confirmPassword" type="password" placeholder="请确认新密码"
            :inputBorder="false" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <su-fixed bottom placeholder bg="none">
      <view class="footer-box ss-p-20">
        <button class="ss-rest-button logout-btn ui-Shadow-Main" @tap="submit">保存</button>
      </view>
    </su-fixed>
  </s-layout>
</template>

<script setup>
  import {
    ref,
    reactive,
    unref
  } from 'vue';
  import {
    onShow,
  } from '@dcloudio/uni-app';
  import {
    password
  } from '@/sheep/validate/form';
  import UserApi from '@/sheep/api/member/user';
  import sheep from '@/sheep';
  const accountLoginRef = ref(null);
  const state = reactive({
    model: {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    },
    rules: {
      oldPassword: {
        rules: [{
          required: true,
          errorMessage: '旧密码不能为空'
        }]
      },
      newPassword: password,
      confirmPassword: {
        rules: [{
          required: true,
          errorMessage: '确认密码不能为空'
        }, {
          validateFunction: (rule, value, data) => data.newPassword === value,
          errorMessage: '两次输入的密码不一致'
        }]
      }
    }
  });

  const submit = async () => {
    // 表单验证
    const validate = await unref(accountLoginRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;
    console.log(state.model)
    const {
      code
    } = await UserApi.updateUserPassword({
      oldPassword: state.model.oldPassword,
      newPassword: state.model.newPassword
    });
    if (code === 0) {
      sheep.$router.back()
    }
    // this.$refs.form.validate().then(res => {
    //   updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
    //     this.$modal.msgSuccess("修改成功")
    //   })
    // })
  }
</script>

<style lang="scss">
  .pwd-retrieve-container {
    padding-top: 36rpx;
    padding: 15px;
    background: #fff;
  }

  .logout-btn {
    width: 710rpx;
    height: 80rpx;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: $white;
  }
</style>